$(function() {
  // 首页渲染
  var currentPage = 1;
  var pageSize = 4;
  function render() {
    $.ajax({
      type: "get",
      url: "/product/queryProductDetailList",
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 组合
        var str = template("tmp", res);
        $("tbody").html(str);
        setPage(res.total);
      }
    });
  }
  render();

  // 分页
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }
    });
  }

  //3. 下拉列表的填充
  $.ajax({
    type: "get",
    url: "/category/querySecondCategoryPaging",
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: "json",
    success: function(res) {
      //成功的回调函数
      console.log(res);
      var str = template("two-tmp", res);
      $(".cate-two-list").html(str);
    }
  });

  // 4.点击下拉菜单，把值赋给按钮，id赋给隐藏域
  $(".cate-two-list").on("click", "a", function() {
    $(".cate-title").text($(this).text());
    $("#brandId").val($(this).data("id"));
    // 7.
    $(".add-form")
      .data("bootstrapValidator")
      .updateStatus("brandId", "VALID");
  });

  // 5.上传图片
  var picArr = [];
  $("#file").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      console.log(data);
      var url = data.result;
      // s数组记录地址
      picArr.unshift(url);
      // 预览图片
      $(".img-box").prepend(
        '<img src="' + url.picAddr + '" alt="" height="60">'
      );

      // 判断图片是否大于三张
      if (picArr.length > 3) {
        $(".img-box img:last-child").remove();
        picArr.pop();
      }
      // 当图片合理时
      if (picArr.length == 3) {
        // 隐藏域记录图片地址
        $("#picArr").val(JSON.stringify(picArr));
        // 7.
        $(".add-form")
          .data("bootstrapValidator")
          .updateStatus("picArr", "VALID");
      }
    }
  });

  // 6.对表单进行校验
  // 使用表单校验插件;
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      brandId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入二级分类"
          }
        }
      },
      proName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品名称"
          }
        }
      },
      proDesc: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品描述"
          }
        }
      },
      num: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品库存"
          },
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: "数量为非零开头"
          }
        }
      },
      size: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品尺码"
          },
          regexp: {
            regexp: /^[1-9]\d-[1-9]\d$/,
            message: "尺寸输入形式xx-xx"
          }
        }
      },
      oldPrice: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品原价"
          }
        }
      },
      price: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品现价"
          }
        }
      },
      picArr: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请上传三张图片"
          }
        }
      }
    }
  });

  // 7.手动修改下拉菜单及图片的状态

  // 8.添加商品
  $(".add-form").on("success.form.bv", function(e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type: "post",
      url: "/product/addProduct",
      data: $(".add-form").serialize(),
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 页面重新渲染
        render();
        // 隐藏模态框
        $(".modal-add").modal("hide");
        // 表单重置
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
        // 手动清空
        $(".cate-title").text("请输入二级分类");
        $(".img-box img").remove();
        picArr = [];
      }
    });
  });
});
